import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Image } from "@tarojs/components-rn";
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime } from "../../utils/common";
import indexStyleSheet from "./index_styles";
import bg_01 from '../../assets/img/bg_01.jpg';
import bg_02 from '../../assets/img/bg_02.jpg';
import bg_03 from '../../assets/img/bg_03.jpg';
import bg_04 from '../../assets/img/bg_04.jpg';
var _styleSheet = indexStyleSheet;
let Index = class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: {}
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '工程金融中心' });
    this.getCount();
  }
  getCount() {
    let { FinancialCenterStore } = this.props.stores;
    FinancialCenterStore.getCount({
      callback: res => {
        this.setState({
          count: toJS(res)
        });
      }
    });
  }
  handelRouter(url = '/pages/index/index') {
    if (!getRuntime().getToken()) {
      getRuntime().navigateTo('/pages/login/login');
      return;
    }
    getRuntime().navigateTo(url);
  }
  render() {
    let { count } = this.state;
    return <View style={_styleSheet["finance-center"]}>
        <View onClick={this.handelRouter.bind(this, '/pages/finance/page1')} style={_styleSheet["finance-item"]}>
          <Image src={bg_01} style={_styleSheet["finance-bg"]} />
          <View style={_styleSheet["finance-info"]}>
            <View style={_styleSheet["title-en"]}>ENGINEERING CASH</View>
            <View style={_styleSheet["title"]}>工程保函中心</View>
            <View style={_styleSheet["num"]}>已成功办理 {count.letterOfGuaranteeCount} 人</View>
            <View style={[_styleSheet["btn"], _styleSheet["btn1"]]}>立即办理></View>
          </View>
        </View>

        <View onClick={this.handelRouter.bind(this, '/pages/finance/page2')} style={_styleSheet["finance-item"]}>
          <Image src={bg_02} style={_styleSheet["finance-bg"]} />
          <View style={_styleSheet["finance-info"]}>
            <View style={_styleSheet["title-en"]}>ENGINEERING CASH</View>
            <View style={_styleSheet["title"]}>工程现金</View>
            <View style={_styleSheet["num"]}>已成功办理 {count.projectCashcsCount} 人</View>
            <View style={[_styleSheet["btn"], _styleSheet["btn2"]]}>立即申请></View>
          </View>
        </View>

        <View onClick={this.handelRouter.bind(this, '/pages/finance/page3')} style={_styleSheet["finance-item"]}>
          <Image src={bg_03} style={_styleSheet["finance-bg"]} />
          <View style={_styleSheet["finance-info"]}>
            <View style={_styleSheet["title-en"]}>ENGINEERING COOPERATION</View>
            <View style={_styleSheet["title"]}>工程项目预约</View>
            <View style={_styleSheet["num"]}>已成功合作 {count.projectSubscribeCount} 人</View>
            <View style={[_styleSheet["btn"], _styleSheet["btn3"]]}>立即预约></View>
          </View>
        </View>

        <View onClick={this.handelRouter.bind(this, '/pages/finance/page4')} style={_styleSheet["finance-item"]}>
          <Image src={bg_04} style={_styleSheet["finance-bg"]} />
          <View style={_styleSheet["finance-info"]}>
            <View style={_styleSheet["title-en"]}>OTHER ENGINEERING CASH</View>
            <View style={_styleSheet["title"]}>其他工程服务</View>
            <View style={_styleSheet["num"]}>已成功办理 {count.projectCount} 人</View>
            <View style={[_styleSheet["btn"], _styleSheet["btn4"]]}>立即预约></View>
          </View>
        </View>
      </View>;
  }
};
Index = tslib_1.__decorate([inject("stores"), observer], Index);
export default Index;